<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <h:head>
        <f:facet name="first">
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        </f:facet>
    </h:head>

    <composite:interface>
        <composite:attribute name="mantArticulo"/>
        <composite:attribute name="accion" method-signature="pe.com.cotelasa.scp.entidad.Articulo accion()"/>
        <composite:attribute name="isEditable" type="java.lang.Boolean"/>
    </composite:interface>

    <composite:implementation>
        <center>
            <p:panelGrid id="formArticulo" rendered="#{!cc.attrs.isEditable}" >
                <p:row>
                    <p:column>
                        <h:outputText id="lblCategriaArticulo" value="CATEGORIA ARTICULO: " class="lblForm"  />

                    </p:column>
                    <p:column colspan="3">
                        <p:selectOneMenu id="cbxCategoriaArticulo" required="true" var="categ" style="width: 140px" 
                                         value="#{BKComponenteArticulo.idCategoriaArticulo}" converter="#{categoriaArticuloConverter}"
                                         filter="#{BKComposicionArticulo.listaCategoriaArticuloActivos.size() gt 10}" filterMatchMode="contains"> 
                            <f:selectItem itemLabel="Seleccionar" itemValue="" /> 
                            <f:selectItems value="#{BKComposicionArticulo.listaCategoriaArticuloActivos}" var="cat" 
                                           itemLabel="#{cat.nombre}" itemValue="#{cat}"/>	
                            <p:column>  
                                #{categ.nombre}
                            </p:column>  
                            <p:ajax update="idArticulo,articulosElegidos" listener="#{MBComponenteArticulo.buscarArticulo}" event="change" />  
                        </p:selectOneMenu>
                        <p:message for="cbxCategoriaArticulo"/>
                        <h:outputLink value="#{request.contextPath}#{MBCategoriaArticulo.nuevo()}.anx" target="_blank" class="linkAgregar" >Agregar Categoría Articulo</h:outputLink>
                    </p:column>

                </p:row>

                <p:row>
                    <p:column>
                        <h:outputText id="lblArticulo" value="ARTICULO(*): "  class="lblForm"  />

                    </p:column>
                    <p:column colspan="3">
                        <p:selectOneMenu value="#{BKComponenteArticulo.idArticulo}" required="true" id="idArticulo" panelStyleClass="print"
                                         converter="#{articuloConverter}" var="arti" filter="true" filterMatchMode="contains" 
                                         panelStyle="width:450px" style="width: 450px" rendered="false" >  
                            <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                            <f:selectItems value="#{BKComponenteArticulo.listaArticuloActivos}" var="art"
                                           itemLabel="#{art.nombreComercial}" itemValue="#{art}"  />
                            <p:column filterStyleClass="print">  
                                #{arti.nombreComercial}
                            </p:column> 
                        </p:selectOneMenu>
                        <p:selectCheckboxMenu value="#{BKComponenteArticulo.listaArticuloElegidos}" label="Lista de Articulos" filter="true" 
                                              filterMatchMode="contains" panelStyle="width:450px" id="articulosElegidos" converter="#{articuloConverter}" >  
                            <f:selectItems value="#{BKComponenteArticulo.listaArticuloActivos}" var="art"
                                           itemLabel="#{art.nombreComercial}" itemValue="#{art}"  /> 
                        </p:selectCheckboxMenu>
                        <p:message for="articulosElegidos" display="text"/>
                        <h:outputLink value="#{request.contextPath}#{MBArticulo.nuevo()}.anx" target="_blank" class="linkAgregar" >Agregar Articulo</h:outputLink>
                    </p:column>
                </p:row>
                <p:row rendered="false">
                    <p:column>
                        <h:outputText value="PRECIO(*): " id="lblPrecio"  class="lblForm" />

                    </p:column>
                    <p:column colspan="3">
                        <p:inputText id="txtFormularioNombre" maxlength="11" required="true" 
                                     value="#{BKComponenteArticulo.formularioArticulo.precio}" />
                        <p:message for="txtFormularioNombre" display="text"/>
                    </p:column>

                </p:row>

                <p:row>
                    <p:column colspan="4">    
                        <p:commandButton id="btnAgregarArticulo" actionListener="#{MBComponenteArticulo.agregarArticulo}" 
                                         ajax="true" update="dataTablaArticulo,formArticulo"  
                                         value="AGREGAR" process="formArticulo"/>
                    </p:column>
                </p:row>
            </p:panelGrid>
        </center>

        <p:panel header="LISTA DE ARTICULO">
            <p:dataTable id="dataTablaArticulo" var="articulo" value="#{BKComponenteArticulo.listaArticulo}" widgetVar="carsTable"
                         emptyMessage="No se encontraron articulos" rowsPerPageTemplate="5,10,15" editable="true"
                         paginator="true" rows="5" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}
                         {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowIndexVar="rowIndex"
                         sortBy="#{articulo.articulo.nombreComercial}" sortOrder="asc" >

                <p:ajax event="rowEdit" listener="#{MBComponenteArticulo.editarArticulo}"/>  

                <p:column id="idColumnaNum" style="width: 5%" headerText="Num.">
                    <h:outputText value="#{rowIndex+1}" />
                </p:column>

                <p:column id="idColumnaNombre" headerText="ARTICULO" sortBy="#{articulo.articulo.nombreComercial}" 
                          filterBy="#{articulo.articulo.nombreComercial}" filterStyle="width:90%" filterMatchMode="contaims">
                    <h:outputText value="#{articulo.articulo.nombreComercial}" />  
                </p:column>

                <p:column id="idColumnaPrecio" headerText="PRECIO" rendered="false" sortBy="#{articulo.precio}">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText value="#{articulo.precio}" />  
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputText value="#{articulo.precio}" style="width:100%" maxlength="150" required="true"/>  
                        </f:facet>  
                    </p:cellEditor> 
                </p:column>

                <p:column rendered="#{!cc.attrs.isEditable}" headerText="ACCIONES" style="text-align: center">             
                    <p:commandButton id="selectButton" oncomplete="confirmacion.show()" ajax="true"
                                     icon="ui-icon-trash" process="@this" >
                        <f:setPropertyActionListener value="#{articulo}" target="#{BKComponenteArticulo.currentArticulo}"/>
                    </p:commandButton>
                    
                </p:column>    
            </p:dataTable>   
        </p:panel>
        <p:confirmDialog id="dlgEliminarArticulo" message="¿ Desea realmente eliminar este articulo ?"
                         header="Eliminar Articulo" severity="alert" widgetVar="confirmacion">
            <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">      
                <p:commandButton id="btnConfEliArticulo" actionListener="#{MBComponenteArticulo.eliminarArticulo}" update="dataTablaArticulo"
                                 value="Si" oncomplete="confirmacion.hide()" immediate="true" style="text-align: center" process="@this"  />
                <p:commandButton id="btnCancEliArticulo" value="No" onclick="confirmacion.hide()" type="button" style="text-align: center" />
            </h:panelGrid>
        </p:confirmDialog>    
    </composite:implementation>

</html>